import React, { Component } from 'react';
import 'element-theme-default';
import Picture from './Picture';
import "./notes.css";

class Notes extends Component {

    constructor(props) {
        super(props);
        this.state={
            userid: localStorage.getItem("userid"),
            text: '111111',
            src:'',
            book:'',
            author:'',
            classify:''
        }
    }
    inputChange(e){
        //console.log(e.target.value)
        this.setState({
            text:e.target.value
        })
    }
    inputBook(e){
        //console.log(e.target.value)
        this.setState({
            book:e.target.value
        })
    }
    inputAuthor(e){
        //console.log(e.target.value)
        this.setState({
            author:e.target.value
        })
    }
    inputClassify(e){
    //console.log(e.target.value)
    this.setState({
        classify:e.target.value
    })
    }

    render() {
        return (
            <div>
                {/* 头，包括返回，发布 */}
                <div style={{
                    width:'100%',
                    height:'50px',
                    borderBottom:'1px solid #778899',
                    textAlign:'center'
                }}>
                    <i  className='iconfont iconfanhui' style={{
                         fontSize:'30px',
                         float:'left',
                         margin:'10px' 
                    }} onClick={() => this.props.history.goBack()}></i> 
                    <div style={{display:'inline-block',
                         margin:'20px'}}>发表随笔</div>
                    <div style={{float:'right',
                         margin:'20px',
                         fontSize:'20px'}}
                         onClick= {this.topicszeng}  >发布</div>                       
                    </div>
                <div >
                <form>
                    {/* 文本框上传图片 */}
                    <textarea placeholder='记录灵感产生的瞬间：'
                    type='text' style={{width:'100%',height:'150px',border:'1px solid #73C1F3'}}
                    onChange={(e)=>this.inputChange(e)} ></textarea>
                   
                    <div style={{width:'100%',height:'30px' ,color:'#A9A9A9'}}>
                        提示：尽量不使用表情，保持文字的美。</div>
                    
                     {/* <Picture />  */}
                    
                    {/* <input style={{}}
                     type="file" id="file" accept="image/*" onChange={(e)=>this.changepic(e)}/> */}

                    <div className="file">
                         <span>上传图片</span>
                         <input type="file"  id="file" className="upload" accept="image/*"
                          onChange={(e)=>this.changepic(e)}/>
                         
                    </div>
                   <div id='show'> </div>
                    {/* <img id='img' src='' style={{ width: '250px',height:'150px',margin:'0 auto'}}></img> */}
                   
                   <div className='tui'>
                     <div id='book'>推荐书籍</div>
                     <div><span>书名：</span><input  onChange={(e)=>this.inputBook(e)}></input></div>
                     <div><span>作者：</span><input onChange={(e)=>this.inputAuthor(e)}></input></div>
                     <div><span>分类：</span><input onChange={(e)=>this.inputClassify(e)}></input></div>
                  </div>
                    
                

                </form>
                 </div>
               
            </div>
        )
    }

    changepic(e) {
        var reads = new FileReader();
        var f = document.getElementById('file').files[0];
       // var srcc=''
        reads.readAsDataURL(f);
        console.log(f)
        reads.onload = function(e) {
            // document.getElementById('img').src = this.result;
            document.getElementById('show').innerHTML=" <img id='img' src='"+this.result+"' ></img>"
            // console.log(this.result)
        }
    }

    // changesrc(e){
    //     // document.getElementById('img').src = this.result;
    //     var srcc=document.getElementById('img').src
    //     this.setState({
    //         src:srcc
    //     }
    //     )
    // }

    //增加新的随笔
	topicszeng = () => {       
        document.getElementById('img')?this.state.src=document.getElementById('img').src:this.state.src='333'
        //console.log(this.state)
        this.props.history.goBack()
		console.log('topicszeng');
		fetch('http://62.234.30.197:8088/topics/zeng', {
			method: 'post',
            body: JSON.stringify({'txt':`${this.state.text}`,
            'pic':`${this.state.src}`,
            'userid':`${this.state.userid}`,
            'bookname':`${this.state.book}`,
            'type':`${this.state.classify}`,
            'name':`${this.state.author}`

        }),
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			//console.log(res)
        })
        
	}

}


export default Notes